<template>
  <div class="engine-con">
    <div class="head-form">
      <h2>{{ procFormDatas.title }}</h2>
      <p class="dis-flex">
        <span
          >表单编码：<span class="time">{{ procFormDatas.formInstId }}</span></span
        >
        <span
          >发起时间：<span class="time">{{ procFormDatas.initiationTime }}</span></span
        >
      </p>
    </div>
    <Engine
      :mode="MODE.PC"
      :scene="SCENE.PREVIEW"
      :dataInject="dataInject"
      :nodeInject="nodeInject"
      :bridge="bridge"
      style="min-height='100px'"
      @submit="onSubmit"
      ref="engine"
    >
    </Engine>
    <div>
      <!-- 流程节点 -->
      <div class="father">
        <div style="width: 84%">
          <a-steps :current="approvedNodeNum - 1" direction="vertical">
            <a-step class="description-fa" v-for="(item, index) in steps" :key="index" :title="item.nodeName">
              <template slot="icon">
                <img v-if="item.nodeType === 'START'" src="./img/START.png" style="height: 30px; width: 30px" alt="" />
                <img
                  v-if="item.nodeType === 'APPROVER'"
                  src="./img/APPROVER.png"
                  style="height: 30px; width: 30px"
                  alt=""
                />
                <img
                  v-if="item.nodeType === 'NOTIFIER'"
                  src="./img/NOTIFIER.png"
                  style="height: 30px; width: 30px"
                  alt=""
                />
              </template>
              <span slot="description">
                <div v-if="item.nodeStauts == 'running'">
                  {{ item.operatorList.length }}人{{ getActivateType(item) }}
                  <span>{{ item.nodeStautsDesc === '' ? '' : '(' + item.nodeStautsDesc + ')' }}</span>
                </div>
                <span v-for="(items, i) in item.operatorList" :key="i">
                  <div v-if="item.nodeStauts == 'running'">
                    {{ items.realName || items.realname }}
                  </div>
                  <div v-else>
                    <p>
                      {{ items.realName || items.realname }}
                      <span>{{
                          item.nodeStautsDesc === '' ? '' : '(' + item.nodeStautsDesc + ')'
                        }}</span>
                    </p>
                  </div>
                  <p>{{ items.opinion || '' }}</p>
                </span>
                <p>{{ item.remark || '' }}</p>
              </span>
            </a-step>
          </a-steps>
        </div>
        <div>
          <el-form :model="candidatesson">
            <el-form-item v-for="(item, index) in steps" :key="index" class="son"> </el-form-item>
          </el-form>
        </div>
      </div>
      <!-- 撤销 -->
      <a-modal title="撤销" :visible="dialogrevoke" width="30%" @cancel="dialogrevoke = false">
        是否需要撤销？
        <div slot="footer" class="dialog-footer">
          <a-button @click="close()">取 消</a-button>
          <a-button type="primary" @click="revoke()" :loading="loading">确 定</a-button>
        </div>
      </a-modal>
      <!-- 转交 -->
      <a-modal
        :modal-append-to-body="false"
        title="转交"
        :visible.sync="dialogpassOn"
        width="30%"
        @cancel="dialogpassOn = false"
      >
        <j-select-user-by-dep v-model="users" :multi="false" @changeRow="onChangeUserName"></j-select-user-by-dep>
        <div slot="footer" class="dialog-footer">
          <a-button @click="close()">取 消</a-button>
          <a-button type="primary" @click="passOn()" :loading="loading">确 定</a-button>
        </div>
      </a-modal>
      <!-- 加签 -->
      <a-modal title="加签" :visible.sync="dialogAddAssignee" width="30%" @cancel="dialogAddAssignee = false">
        <j-select-user-by-dep v-model="users" :multi="false" @changeRow="onChangeUserName"></j-select-user-by-dep>
        <div slot="footer" class="dialog-footer">
          <a-button @click="close()">取 消</a-button>
          <a-button type="primary" @click="addAssignee()" :loading="loading">确 定</a-button>
        </div>
      </a-modal>
      <!-- 退回 -->
      <a-modal title="退回" :visible.sync="dialogGoBack" width="30%" @cancel="dialogGoBack = false">
        <el-form :model="formGoBack">
          <!-- {{ approvalsNodeList }} -->
          <el-form-item label="回退节点" :label-width="formLabelWidth">
            <el-select v-model="targetNodeId" placeholder="请选择">
              <el-option
                v-for="(item, index) in approvalsNodeList"
                :key="index"
                :label="getNodeName(item, index)"
                :value="item.nodeId"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="理由" :label-width="formLabelWidth">
            <el-input type="textarea" :maxlength="50" v-model="formGoBack.refuse"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <a-button @click="close()">取 消</a-button>
          <a-button type="primary" :loading="loading" @click="goBack()">确 定</a-button>
        </div>
      </a-modal>
      <!-- 拒绝 -->
      <a-modal title="拒绝" :visible.sync="dialogrefuse" width="30%" @cancel="dialogrefuse = false">
        <el-form :model="formrefuse">
          <el-form-item label="理由" :label-width="formLabelWidth">
            <el-input type="textarea" :maxlength="50" v-model="formrefuse.refuse"></el-input>
          </el-form-item>
          <el-form-item label="上传" :label-width="formLabelWidth">
            <div class="uploads">
              <div>
                <a-upload
                  action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                  list-type="picture"
                  class="upload-list-inline"
                  :customRequest="customRequestimg"
                  :remove="removeupload"
                  :file-list="fileList"
                >
                  <a-button> <a-icon type="upload" /> 上传图片 </a-button>
                </a-upload>
              </div>
              <div>
                <a-upload
                  action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                  list-type="text"
                  class="upload-list-inline"
                  :customRequest="customRequestdoc"
                  @change="changes"
                  :remove="removeuploada"
                  :file-list="fileLista"
                >
                  <a-button> <a-icon type="upload" /> 上传文件 </a-button>
                </a-upload>
              </div>
            </div>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <a-button @click="close()">取 消</a-button>
          <a-button type="primary" @click="refuse()" :loading="loading">确 定</a-button>
        </div>
      </a-modal>
      <!-- 同意 -->
      <a-modal title="同意" :visible.sync="dialogagree" width="30%" @cancel="dialogagree = false">
        <!-- {{formagree}} -->
        <el-form :model="formagree">
          <el-form-item label="意见" :label-width="formLabelWidth">
            <el-input type="textarea" :maxlength="50" v-model="formagree.agree"></el-input>
          </el-form-item>
          <el-form-item label="上传" :label-width="formLabelWidth">
            <div class="uploads">
              <div>
                <a-upload
                  action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                  list-type="picture"
                  class="upload-list-inline"
                  :customRequest="customRequestimg"
                  :remove="removeupload"
                  :file-list="fileList"
                >
                  <a-button> <a-icon type="upload" /> 上传图片 </a-button>
                </a-upload>
              </div>
              <div>
                <a-upload
                  action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                  list-type="text"
                  class="upload-list-inline"
                  :customRequest="customRequestdoc"
                  @change="changes"
                  :remove="removeuploada"
                  :file-list="fileLista"
                >
                  <a-button> <a-icon type="upload" /> 上传文件 </a-button>
                </a-upload>
              </div>
            </div>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <a-button @click="close()">取 消</a-button>
          <a-button type="primary" @click="agree()" :loading="loading">确 定</a-button>
        </div>
      </a-modal>

      <!-- 流程节点结束 -->
      <!-- {{actBtn}} -->
      <div class="ra-save">
        <a-button v-if="actRevokeButton" @click="dialogrevoke = true">撤销</a-button>
        <a-button v-if="actBtn" class="none" @click="dialogpassOn = true">转交</a-button>
        <a-button v-if="actBtn" class="none" @click="dialogAddAssignee = true">加签</a-button>
        <a-button v-if="actBtn" class="none" @click="dialogGoBack = true">退回</a-button>
        <a-button v-if="actBtn" class="none" @click="dialogrefuse = true">拒绝</a-button>
        <a-button v-if="actBtn" class="none" type="primary" @click="dialogagree = true">同意</a-button>
      </div>
    </div>
  </div>
</template>

<script>
import store from '@/store'
import OA, {
  Engine,
  MODE,
  SCENE,
  Bridge,
  injectRequest,
  provideRequest,
  NodeStore,
  convert,
} from '@/components/oa/oa-process.umd'
import { post, get, put } from '@/api/request'
import '@/components/oa/oa-process.css'
import SelectUserModal from '@views/system/modules/SelectUserModal'
import {
  getUserListNotdel,
  queryFormData,
  queryProcessResult,
  saveProcessStart,
  getSelectListByIds,
  addUpload,
  getRefuse,
  getAgree,
  getRevoke,
  getPassOn,
  getAddAssignee,
  getGoBack,
} from '@/api/api'
import { postAction } from '@api/manage'

const bridge = new Bridge()
export default {
  components: {
    Engine,
    OA,
  },
  inject: ['closeCurrent'],
  data() {
    return {
      procFormDatas: {
        title: '',
        processInstanceId: '',
        formInstId: '',
        initiationTime: '',
      },
      loading: false, //a按钮状态
      approvalsNodeList: [],
      users: '',
      restaurants: [],
      state: '',
      approvedNodeNum: 1,
      actBtn: this.$route.query.my || false, //操作按钮
      actRevokeButton: this.$route.query.revokeShowFlag !== 'false' && this.$route.query.processResult === 'running',
      userId: JSON.parse(localStorage.getItem('pro__Login_Userinfo')).value.id,
      formLabelWidth: '90px', //弹框宽度
      fileList: [],
      fileLista: [],
      approvalFileId: '', //上传文件
      commentImgId: '', //上传图片
      //同意
      dialogagree: false,
      formagree: {
        agree: '',
      },
      // 拒绝
      dialogrefuse: false,
      formrefuse: {
        refuse: '',
      },
      // 退回
      dialogGoBack: false,
      formGoBack: {
        refuse: '',
      },
      //撤销
      dialogrevoke: false,
      //转交
      dialogpassOn: false,
      //加签
      dialogAddAssignee: false,
      userKey: null,
      targetNodeId: null,

      allUserList: [], //所有固定选择的用户列表
      userNameList: [], //选择的用户的列表
      userList: {},
      defaultType: ['START', 'target_originator', 'target_approval'],
      disableds: false,
      flag: 0,
      stepsshow: false,
      dialogFormVisible: false,
      multiples: true, //流程审批人是否开启多选
      MODE,
      SCENE,
      processDataVoId: '', //流程code
      processResult: '', //流程实例状态
      candidatesson: {},
      region: [], //已选审批人
      memberList: [], //流程审批人列表
      // procFormDatas: [], //表单数据
      processDataVo: [], //流程提交列表
      steps: [], //流程步骤条
      stepsList: { START: '发起人', APPROVER: '审批人', END: '结束节点', NOTIFIER: '抄送人' }, //流程类型映射
      // stepsList: { START: '发起人', APPROVER: '审批人', END: '结束节点' }, //流程类型下的分类映射
      approvalTypeList: {
        target_select: '发起人自选',
        START: '发起人自选',
        target_originator: '发起人自己',
        target_approval: '指定人员',
      }, //流程类型的属性映射
      nodeInject: new NodeStore(),
      bridge,
      nodeSort: '', //下标
      dataInject: {
        getCanvas: () => {
          return this.procFormInfoData()
        },
      },
      // id:''
    }
  },
  created() {
    this.browserRedirect()
    injectRequest({ post, get, put })
    window.test = this
  },
  computed: {
    id() {
      return this.$route.query.processInstanceId
    },
  },
  mounted() {
    //监听节点变化
    // this.procFormInfoData()
    var that = this
    bridge.addEventListener('nodes', (nodes) => {
      that.stepsshow = false
      that.processDataVo = []
    })
    // that.restaurants = that.loadAll();
    this.loadUsers()
  },
  watch: {
    $route(to, from) {
      this.procFormInfoData()
    },
  },
  destroyed() {},
  methods: {
    browserRedirect() {
      var sUserAgent = navigator.userAgent.toLowerCase()
      if (/ipad|iphone|midp|rv:1.2.3.4|ucweb|android|windows ce|windows mobile/.test(sUserAgent)) {
        //跳转移动端页面
        console.log('跳转移动端页面')
        this.$router.push({
          path: '/mobileapplyFormDetails',
          query: {
            processInstanceId: this.$route.query.processInstanceId,
            taskId: this.$route.query.taskId,
            revokeShowFlag: this.$route.query.initiator === store.getters.userInfo.username,
            processResult: this.$route.query.processResult,
            title: this.$route.query.title,
            my: this.$route.query.my,
          },
        })
        //
      } else {
        //跳转pc端页面
      }
    },
    getActivateType(item) {
      if (item.properties.actionerRules[0].type === 'target_originator') {
        return ''
      }
      if (item.properties.activateType) {
        if (item.properties.activateType === 'ONE_BY_ONE') {
          return '依次审批'
        } else if (item.properties.agreeAll) {
          return '会签'
        } else {
          return '或签'
        }
      }
    },
    getNodeName(item, index) {
      console.log(index, this.approvalsNodeList.length)
      const stepName =
        index === this.approvalsNodeList.length - 1 ? '(上一步)' : '(' + this.getNameList(item.operatorList) + ')'
      return item.nodeName + stepName
    },
    onChangeUserName(e, arr, index) {
      console.log(arr, 'aa')
      this.userKey = this.getUserListSimple(arr).toString()
    },
    loadUsers() {
      getUserListNotdel().then((res) => {
        if (String(res.code) !== '200') {
          this.$message.error(res.message)
        } else {
          this.restaurants = res.result
        }
      })
    },
    querySearch(queryString, cb) {
      var restaurants = this.restaurants
      // var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
      var results = restaurants
      // 调用 callback 返回建议列表的数据
      cb(results)
    },
    createFilter(queryString) {
      return (restaurant) => {
        return restaurant.realname.toLowerCase().indexOf(queryString.toLowerCase()) === 0
      }
    },
    showBack() {
      const node = this.approvalsNodeList.length > 0 ? this.approvalsNodeList[0].taskId : ''
      // 有审批节点，且节点状态不等于最开始的的状态就可以退回
      if (node && this.steps[approvedNodeNum].taskId !== node) {
        return true
      } else {
        return false
      }
    },
    handleSelect(item) {
      console.log('转交-----------item', item)
      this.userKey = item.id
      this.state = item.realname
    },
    handleIconClick(ev) {
      console.log('转交-----------ev', ev)
    },
    //获取taskId
    getTaskId() {
      // console.log('获取taskId', this.processDataVo)
      const index = this.processDataVo.findIndex((item) => {
        const operatorList = item.operatorList.map((item) => {
          return item.userId
        })
        console.log(operatorList, 'operatorList11')
        // return operatorList.includes(this.userId)
      })
      //   console.log(index, 'index')
    },
    // 同意
    agree() {
      let par = {
        taskId: this.$route.query.taskId,
        fileUrl: this.approvalFileId,
        opinion: this.formagree.agree,
        picUrl: this.commentImgId,
      }
      this.loadingbtnOpen()
      getAgree(par).then((res) => {
        this.loadingbtnEnd()
        console.log(res)
        this.dialogagree = false
        if (String(res.code) == '500') {
          this.$message.error('操作失败')
        } else {
          this.$message.success('操作成功')
          this.approvalFileId = ''
          this.commentImgId = ''
          this.actEnd()
          setTimeout(() => {
            this.$router.push({ path: '/process/approval/MyTaskNeedToExcute', query: {} })
          }, 100)
          this.closeCurrent()
        }
      })
    },
    // 拒绝
    refuse() {
      let par = {
        taskId: this.$route.query.taskId,
        fileUrl: this.approvalFileId,
        opinion: this.formrefuse.refuse,
        picUrl: this.commentImgId,
      }
      this.loadingbtnOpen()
      getRefuse(par).then((res) => {
        this.dialogrefuse = false
        this.loadingbtnEnd()
        if (String(res.code) == '500') {
          this.$message.error('操作失败')
        } else {
          this.$message.success('操作成功')
          this.approvalFileId = ''
          this.commentImgId = ''
          this.actEnd()
          setTimeout(() => {
            this.$router.push({ path: '/process/approval/MyTaskNeedToExcute', query: {} })
          }, 100)
          this.closeCurrent()
        }
      })
    },
    loadingbtnOpen() {
      this.loading = true
    },
    loadingbtnEnd() {
      this.loading = false
    },
    revoke() {
      this.loadingbtnOpen()
      let par = {
        processInstanceId: this.$route.query.processInstanceId,
      }
      if (this.$route.query.processInstanceId) {
        getRevoke(par).then((res) => {
          this.dialogrevoke = false
          // this.userKey = null
          this.loadingbtnEnd()
          if (String(res.code) === '500') {
            this.$message.error('操作失败')
          } else {
            this.$message.success('操作成功')
            setTimeout(() => {
              this.$router.push({ path: '/process/approval/MyTaskNeedToExcute', query: {} })
            }, 100)
            this.closeCurrent()
          }
        })
      }
    },
    passOn() {
       if(this.userKey === null){
        return  this.$message.error('转交人必填')
      }
      this.loadingbtnOpen()
      let par = {
        taskId: this.$route.query.taskId,
        userKey: this.userKey,
      }
      getPassOn(par).then((res) => {
        this.loadingbtnEnd()
        this.dialogpassOn = false
        this.userKey = null
        if (String(res.code) === '500') {
          this.$message.error('操作失败')
        } else {
          this.$message.success('操作成功')
          setTimeout(() => {
            this.$router.push({ path: '/process/approval/MyTaskNeedToExcute', query: {} })
          }, 100)
          this.closeCurrent()
        }
      })
    },
    addAssignee() {
       if(this.userKey === null){
        return  this.$message.error('加签人必填')
      }
      this.loadingbtnOpen()
      let par = {
        taskId: this.$route.query.taskId,
        userKey: this.userKey,
      }
      getAddAssignee(par).then((res) => {
        this.loadingbtnEnd()
        this.dialogrevoke = false
        this.userKey = null
        if (String(res.code) === '500') {
          this.$message.error(res.message)
        } else {
          this.$message.success(res.message)
          setTimeout(() => {
            this.$router.push({ path: '/process/approval/MyTaskNeedToExcute', query: {} })
          }, 100)
          this.closeCurrent()
        }
      })
    },
    goBack() {
      console.log(this.targetNodeId,'this.targetNodeId')
      if(this.targetNodeId === null){
        return  this.$message.error('退回节点必填')
      }
      this.loadingbtnOpen()
      let par = {
        taskId: this.$route.query.taskId,
        targetNodeId: this.targetNodeId,
      }
      getGoBack(par).then((res) => {
        this.loadingbtnEnd()
        this.dialogrevoke = false
        if (String(res.code) === '500') {
          this.$message.error('操作失败')
        } else {
          this.$message.success('操作成功')
          setTimeout(() => {
            this.$router.push({ path: '/process/approval/MyTaskNeedToExcute', query: {} })
          }, 100)
          this.closeCurrent()
        }
      })
    },
    // 操作结束后
    actEnd() {
      this.actBtn = false
    },
    close() {
      console.log('关闭')
      this.dialogagree = false
      this.dialogrefuse = false
      this.dialogrevoke = false
      this.dialogpassOn = false
      this.dialogGoBack = false
      this.dialogAddAssignee = false
      this.formagree = {}
      this.formrefuse = {}
      this.formGoBack = {}
      this.fileList = []
      this.fileLista = []
      this.state = ''
    },
    changes(fileList) {
      console.log(fileList)
      fileList.file.status = 'done'
    },
    //上传图片
    customRequestimg(data) {
      const formData = new FormData()
      formData.append('mf', data.file)
      formData.append('fileCategory', 'avatar')
      addUpload(formData).then((res) => {
        data.file.id = res.id
        this.fileList = [...this.fileList, data.file]
        var id = this.commentImgId
        this.commentImgId = id + ',' + res.result.id
        if (this.commentImgId.substr(0, 1) == ',') this.commentImgId = this.commentImgId.substr(1)
        console.log(this.commentImgId)
      })
    },
    //上传文件
    customRequestdoc(data) {
      const formData = new FormData()
      formData.append('mf', data.file)
      formData.append('fileCategory', 'doc')
      addUpload(formData).then((res) => {
        data.file.id = res.id
        this.fileLista = [...this.fileLista, data.file]
        var id = this.approvalFileId
        this.approvalFileId = id + ',' + res.result.id
        if (this.approvalFileId.substr(0, 1) == ',') this.approvalFileId = this.approvalFileId.substr(1)
        console.log(this.approvalFileId, ' fileUrl')
      })
    },
    //删除上传图片
    removeupload(file) {
      console.log(file, '上传111')
      this.fileList = this.fileList.filter((item) => item.id !== file.id)
      var list = this.commentImgId.split(',')
      console.log(list)
      for (let i = 0; i < list.length; i++) {
        if (list[i] == file.id) {
          list.splice(i, 1)
          break
        }
      }
      // console.log(list)
      this.commentImgId = list.toString()
      // console.log(this.commentImgId)
    },
    //删除删除文件
    removeuploada(file) {
      console.log(file, '上传111')
      this.fileLista = this.fileLista.filter((item) => item.id !== file.id)
      var list = this.approvalFileId.split(',')
      console.log(list)
      for (let i = 0; i < list.length; i++) {
        if (list[i] == file.id) {
          list.splice(i, 1)
          break
        }
      }
      // console.log(list)
      this.approvalFileId = list.toString()
      // console.log(this.approvalFileId)
    },
    //精简用户列表数组传输
    getUserListSimple(arr) {
      if (arr.length > 0) {
        const list = arr.map((item) => {
          return item.id
        })
        return list
      } else {
        return []
      }
    },
    // 获取用户ID
    getUserIdList(array) {
      let list = []
      array.forEach((i) => {
        if (i.approvalType === 'target_select') {
          const approvals = i.properties.actionerRules ? i.properties.actionerRules[0].select[0] : ''
          if (approvals === 'approvals') {
            list = list.concat(i.properties.actionerRules[0].range.approvals)
          }
        }
        if (i.approvalType === 'target_approval') {
          list = list.concat(i.properties.actionerRules[0].approvals)
        }
      })
      return list
    },

    getUserName(item) {
      return this.getNameList(item.selectUsers || [])
    },
    getNodeDes(item) {
      const sta = item.nodeStauts === null ? '' : '(' + item.nodeStautsDesc + ')'
      const remark = item.remark === null ? '' : '  ' + item.remark
      return item.nodeType == 'END'
        ? ''
        : this.getNameList(item.operatorList) + sta + remark + this.getNameOpinionList(item.operatorList)
    },
    onSubmitend() {
      const formId = this.$route.query.id
      const procFormDatas = this.procFormDatas
      const processDataVoList = this.processDataVo

      let proObj = {
        formId,
        procFormDatas,
        processDataVo: {
          processCode: this.processDataVoId,
          formId: formId,
          nodeDtos: processDataVoList,
        },
      }
      console.log(proObj, 'processDataVo')
      saveProcessStart(proObj).then((res) => {
        if (String(res.code) === '200') {
          this.$router.push('/process/approval/MyTaskNeedToExcute')
        }
      })
    },
    getUserIdSelectlist(arr) {
      console.log(arr, '1')
      getSelectListByIds({ ids: arr.toString() }).then((res) => {
        this.allUserList = res.result
      })
    },
    //根据多个id匹配找用户信息列表
    getIdUser(arr) {
      const list = this.allUserList.filter((item) => {
        return arr.includes(item.id)
      })
      return list
    },
    queryProcessResultData() {
      queryProcessResult({ processInstanceId: this.$route.query.processInstanceId }).then((res) => {
        if (String(res.code) !== '200') {
          this.$message.error(res.message)
          return
        }
        console.log(res, 'dasd++')
        let nodeDtosArr = res.result.nodeDtos.filter((item) => item.nodeType != "SERVICE")


        this.stepsshow = true
        this.approvedNodeNum = res.result.approvedNodeNum
        this.processDataVoId = res.result.processCode
        this.processResult = res.result.processResult
        this.processDataVo = nodeDtosArr
        this.getTaskId()
        this.steps = nodeDtosArr
        let approvalsNodeList = nodeDtosArr
          .map((item) => {
            if (item.nodeType === 'APPROVER' && item.nodeStauts === 'agree') {
              // 状态为同意的Id
              const isAgreeType = item.nodeStauts === 'agree' ? item.nodeId : ''
              // 拿到nodeID同意数组
              const state = nodeDtosArr.filter((item) => {
                return item.nodeId === isAgreeType
              })
              // T同意的数组里面有没有进行中
              const runninSta = state.filter((item) => {
                return item.nodeStauts === 'running'
              })
              if (runninSta.length == 0) {
                return item
              }
            }
          })
          .filter((e) => {
            console.log(e, 'e', e == null)
            return e !== undefined
          })
        const result = approvalsNodeList.reduce((item, next) => {
          typeof item.find((ele) => ele['nodeId'] === next['nodeId']) === 'undefined' && item.push(next)
          return item
        }, [])
        this.approvalsNodeList = result
      })
    },
    //范围是否是全公司
    selectType(e) {
      if (e.properties.actionerRules[0].select[0] !== 'allStaff') {
        return true
      }
      return false
    },
    // 确定范围成员
    primary() {
      let selectList = this.memberList
        .map((item) => {
          return this.region.includes(item.id) ? item : ''
        })
        .filter((item) => {
          return item !== ''
        })
      console.log(selectList, 'selectList')
      this.processDataVo[this.nodeSort].selectUsers = selectList
      this.region = ''
      this.dialogFormVisible = false
    },
    // 回显默认值
    getTarget(item, index) {
      if (item.approvalType === 'target_approval') {
        const { approvals } = item.properties.actionerRules[0]
        const list = this.getIdUser(approvals)
        // this.processDataVo[index].selectUsers = list
        return this.getNameList(list)
      }
      // this.processDataVo[index].selectUsers = this.getUserListSimple(item.operatorList)
      return this.getNameList(item.operatorList)
    },

    getNameOpinionList(arr) {
      if (arr.length > 0) {
        let name = arr.map((item, index) => {
          return item.opinion || ''
        })
        // console.log(name, 'name')
        return name.toString()
      }
      return ''
    },
    getNameList(arr) {
      if (arr.length > 0) {
        let name = arr.map((item, index) => {
          return item.realName || item.realname
        })
        // console.log(name, 'name')
        return name.toString()
      }
      return ''
    },
    createBy(item, index) {
      this.region = null
      this.dialogFormVisible = true
      const actionerRules = item.properties.actionerRules[0]
      this.memberList = actionerRules.select[0] === 'approvals' ? this.getIdUser(actionerRules.range.approvals) : []
      console.log(this.memberList, 'this.memberList')
      this.multiples = actionerRules.multi
      // var index = item.nodeSort
      // index = index - 1
      // console.log(index)
      this.nodeSort = index
    },
    onSubmit() {
      console.log(this.$refs.engine.submit())
    },
    onSubmits() {
      const nodes = bridge.getDataSource('nodes')
      console.log(nodes, 'nodes1')
      var node = convert.out(nodes)
      console.log(node, 'node2')
      var list = []
      var procFormDatas = []
      for (let i = 0; i < node.length; i++) {
        var nid = node[i].colName
        var value = node[i].value
        var required = node[i].isRequired
        var type = node[i].type
        var nid = node[i].nid
        if (required == '1') {
          var map = {}
          // map[nid] = value
          map.key = nid
          map.value = value
          list.push(map)
          if (value == '' || value == null || value == undefined) {
            return this.$message.error('必填项不能为空')
          }
          if (type == 'date') {
            var myDate = moment(new Date()).format('YYYY-MM-DD')
            // console.log(value, myDate)
            if (nid == 'conversion_date') {
              console.log(this.rztime)
              if (value < this.rztime) {
                return this.$message.error('转正日期选择请大于或等于入职日期')
              }
            } else {
              if (value < myDate) {
                return this.$message.error('日期选择请大于或等于今天日期')
              }
            }
          }
        }

        var maps = {}
        // maps[nid] = value
        maps.key = nid
        maps.value = value
        procFormDatas.push(maps)
      }
      // console.log(list)
      this.procFormDatas = procFormDatas
      console.log(this.procFormDatas, 'procFormDatas')
    },
    // 自定义表单-通过id查询
    procFormInfoData() {
      var id = this.$route.query.processInstanceId
      let par = {
        processInstanceId: id,
      }
      return queryFormData(par)
        .then((res) => {
          if (String(res.code) !== '200') {
            this.$message.error(res.message)
            return
          }
          if (this.$route.query.processInstanceId) {
            this.queryProcessResultData()
          }
          this.procFormDatas = res.result
          const list = res.result.assemblyList.map((node) => {
            return {
              ...node,
              readonly: true,
            }
          })
          console.log(list,'list')
          return list
        })
        .catch((e) => {
          this.formshow = false
        })
    },
    onSuccess(v) {
      if (v === '成功') {
        this.$router.push({ path: '/OAwork/Approval/Processtemplate' })
      }
    },
    clear() {
      try {
        this.$refs.oa.$refs.info.resetForm()
      } catch (e) {
        //
      }
    },
  },
}
</script>


<style>
.engine-con .layout-node {
  min-height: 100px !important;
  height: 100%;
  overflow: auto;
}
</style>
<style lang="less" scoped>
.engine-con {
  width: 1000px;
  margin: 0 auto;

  .head-form {
    text-align: left;
    border-bottom: 1px dashed #ebebeb;
    background: #fff;
    padding: 18px 40px 5px 40px;
    width: 1000px;
    margin: 0px auto;
    .dis-flex {
      display: flex;
      justify-content: space-between;
      font-size: 15px;
    }
    .time {
      color: #b4b4b4;
    }
  }
  .ant-modal-mask {
  }
  .ant-modal-centered .ant-modal {
    z-index: 999999;
  }
  .father {
    background: #fff;
    /* border-radius: 10px; */
    padding: 20px 0 20px 0;
    width: 1000px;
    margin: 20px auto;
    display: flex;
    justify-content: space-around;
  }
  .oa-container {
    background: #fff;
  }
  .engine-con .layout {
    min-height: 100px !important;
    /* min-height: 50px !important; */
  }
  .engine {
    overflow: auto;
  }
  .engine-con {
    /* padding: 24px; */
    width: 1000px;
    margin: 0 auto;
    /* border-radius: 15 px; */
  }

  .none {
    margin: 0 5px;
  }
  .ra-save {
    text-align: center;
    /* padding:20px; */
    margin-top: 20px;
  }
  .my-autocomplete {
    li {
      line-height: normal;
      padding: 7px;

      .name {
        text-overflow: ellipsis;
        overflow: hidden;
      }
      .addr {
        font-size: 12px;
        color: #b4b4b4;
      }

      .highlighted .addr {
        color: #ddd;
      }
    }
  }
  .description-fa p {
    padding: 0px;
    margin: 0px;
  }
  .ant-steps-dot .ant-steps-item-content,
  .ant-steps-dot.ant-steps-small .ant-steps-item-content {
    width: 568px;
  }
  .nextstep {
    text-align: center;
    width: 1000px;
    margin: 0 auto;
    padding-bottom: 15px;
    background: #fff;
  }
}
</style>